<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/mobileSelect.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>大件垃圾回收</title>
    <style>
        .layui-m-layer-msg .layui-m-layercont{
            padding: 10px 20px!important;
        }
        body .layui-m-layer .layui-m-layer-msg{
            bottom: initial!important;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="daohanglan_box">
    <div class="title">
        <i class="icon iconfont icon-iconfontjiantou1"></i>
        <h4>大件垃圾回收</h4>
    </div>
</div>
<!--信息-->
<div class="infoBox">
    <form>
        <div class="whiteBg">
            <div class="clearfix">
                <input type="text" class="youName fl" placeholder="姓名"/>
                <input type="text" class="youTell fl" placeholder="电话"/>
            </div>
            <div class="clearfix">
                <input type="text" id='city-picker' placeholder='请选择省市区' class="fl" style="width: 90%"/>
                <i class="icon iconfont icon-youjiantou"></i>
            </div>
            <div class="clearfix">
                <input type="text" class="youAddress" placeholder='你的详情地址（精确的门牌号）' />
            </div>
            <div class="clearfix">
                <label class="fl">上门时间</label>
                <input type="text" id='youTime' class="fr" placeholder="请选择上门时间"/>
                <i class="icon iconfont icon-youjiantou"></i>
            </div>
            <div class="scrollBox flex">
                <div class="flex-1">
                    <div>
                        <h4>物品</h4>
                        <input type="text" class="classify classifyWupin" placeholder="茶几"/>
                    </div>
                    <i class="icon iconfont icon-jiantou_down"></i>
                </div>
                <div class="flex-1">
                    <div>
                        <h4>材质</h4>
                        <input type="text" class="classify classifyCaizhi" placeholder="木质"/>
                    </div>
                    <i class="icon iconfont icon-jiantou_down"></i>
                </div>
                <div class="flex-1">
                   <div>
                       <h4>重量</h4>
                       <input type="text" class="classify classifyZhongliang" placeholder="<20kg"/>
                   </div>
                    <i class="icon iconfont icon-jiantou_down"></i>
                </div>
                <div class="flex-1">
                   <div>
                       <h4>数量</h4>
                       <input type="text" class="classify classifyShuliang" placeholder="1"/>
                   </div>
                    <i class="icon iconfont icon-jiantou_down"></i>
                </div>
            </div>
        </div>
        <button type="button" class="subBtn">提交申请</button>
    </form>
</div>
<script src="js/address/address-id.js" type="text/javascript"></script>
<script src="js/address/city-picker.min.js" type="text/javascript"></script>
<script src="js/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
    //地区选择
    $("#city-picker").cityPicker({
        title: "选择省市区",
        onChange: function (picker, values, displayValues) {
//            console.log(values, displayValues);
        }
    });
    //获取当前日期
    var currDT = new Date();
    var tdDT; //日期
    var weekdayArr = [];
    for (var i = 0; i < 7; i++) {
        tdDT = getDays()[i];
        var year = tdDT.getFullYear();//年
        var month  = tdDT.getMonth() + 1;//月
        var strDate  = tdDT.getDate(); //日
        weekdayArr.push(year+"/"+month+"/"+strDate);
    }
    //取得当前日期一周内的某一天
    function getWeek(i) {
        var now = new Date();
        var n = now.getDay();
        var start = new Date();
        start.setDate(now.getDate() + i -1); //取得当前日期后一周后的所有日期
        //start.setDate(now.getDate() - n + i); //取得一周内的第一天、第二天、第三天...
        return start;
    }
    //取得当前日期一周内的七天
    function getDays() {
        var days = new Array();
        for (var i = 1; i <= 7; i++) {
            days[i - 1] = getWeek(i);
        }
        return days;
    }
    //上门时间选择
    var timeArr = ['9:00~12:00','13:00~18:00'];
    $("#youTime").picker({
        title: "选择时间",
        cols: [
            {
                textAlign: 'center',
                values: weekdayArr
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            },
            {
                textAlign: 'center',
                values: timeArr
            }
        ]
    });
    //分类选择
    //物品
    $(".classifyWupin").picker({
        title: "物品选择",
        cols: [
            {
                textAlign: 'center',
                values: ['茶几','沙发','床垫','衣柜','桌子','电器']
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            }
        ]
    });
    //材质
    $(".classifyCaizhi").picker({
        title: "材质选择",
        cols: [
            {
                textAlign: 'center',
                values: ['木质','金属','塑料','其他']
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            }
        ]
    });
    //重量
    $(".classifyZhongliang").picker({
        title: "重量选择",
        cols: [
            {
                textAlign: 'center',
                values: ['<20kg','20-30kg','30-50kg','>50kg']
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            }
        ]
    });
    //数量
    $(".classifyShuliang").picker({
        title: "数量选择",
        cols: [
            {
                textAlign: 'center',
                values: ['1','2','3','4','5']
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            }
        ]
    });
    $(function(){
        //提交申请
        $(".infoBox").on("click",".subBtn",function(){
            var n = $(".youName").val();
            var t = $(".youTell").val();
            var c = $("#city-picker").val();
            var d = $(".youAddress").val();
            var time = $("#youTime").val();
            if(n == ""){
                error('姓名不能为空');
            } else if(t == ""){
                error('手机号不能为空');
            } else if(!t.match(/^1[3|4|5|7|8]\d{9}$/)){
                error('请输入正确的手机号');
            } else if(c == ""){
                error('请选择省市区');
            } else if(d == ""){
                error('详细地址不能为空');
            } else if(time == ""){
                error('请选择时间');
            }else{
                layer.open({
                    content: '请确保信息无误后再提交哦~'
                    ,btn: ['确定', '取消']
                    ,yes: function(index){
                        layer.close(index);
                        layer.open({
                            content: '预约成功'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }
                });
            }

        })
    })
</script>
</body>
</html>